<!DOCTYPE html>
<html>
	<head>
		<title></title>
	</head>
	<body>
		<div id="div1">
			<p id="p">p元素</p>
		</div>


		<div id="div2">
			<p id="p1">p1元素</p>
		</div>

		<script>
			// 当元素发生重叠的时候 会出现事件的冒泡还是捕获
			// 在冒泡模式中，最内侧元素的事件会首先被处理，然后是更外侧的 (默认方式，第三个参数为false)
			// 在捕获模式中，最外侧元素的事件会首先被处理，然后是更内侧的
			/*
			let div1 = document.getElementById("div1");
			let p = document.getElementById("p");
			div1.addEventListener("click", () => {
				alert("div被点击");
			})

			p.addEventListener("click", (e) => {
				alert("p被点击");
				console.log(e);
				// 阻止事件冒泡
				e.stopPropagation();
			})



			let div2 = document.getElementById("div2");
			let p1 = document.getElementById("p1");
			div2.addEventListener("click", () => {
				alert("div1被点击");
			}, true)

			p1.addEventListener("click", () => {
				alert("p1被点击");
			}, true)
			*/
			//  事件委托  利用的是事件冒泡传播机制
			// 不要乱用事件委托，我们一般都是父级元素上进行绑定
			// 解决的是重复绑定侦听事件带来的效率问题
			// HTMLCollection是一个伪数组 不能使用数组的方法 但是获取上和数组一样
			// NodeList
			//let divs = document.querySelectorAll("div");
			// console.log(divs);
			// for (let i = 0; i < divs.length; i++) {
			// 	// console.log(divs[i]);
			// 	divs[i].addEventListener("click", () => {
			// 		alert("div被点击");
			// 	})
			// }

			document.body.addEventListener("click", () => {
				alert("div被点击");
			})




		</script>
	</body>
</html>